<template>
	<scroll-view class="public-scroll-view" scroll-y>
		<view class="grammar-container">
			<view class="grammar-model">
				<text class="grammar-model-title">数据绑定</text>
				<view>
					{{data}}
				</view>
			</view>
			<view class="grammar-model">
				<text class="grammar-model-title">双向数据绑定</text>
				<view>
					<input type="text" v-model="data" style="background-color: white; height: 80rpx;" />
				</view>
				<view>
					{{data}}
				</view>
			</view>
			<view class="grammar-model">
				<text class="grammar-model-title">点击事件处理</text>
				<button type="primary" @click="onSurprise">点击有惊喜</button>
			</view>
			<view class="grammar-model">
				<text class="grammar-model-title">条件判断</text>
				<view v-if="statu === '1'">
					天气不错出去逛逛
				</view>
				<view v-else-if="statu === '2'">
					天气一般，在家打游戏
				</view>
				<view v-else>
					天气不好，睡觉
				</view>
			</view>
			<view class="grammar-model">
				<text class="grammar-model-title">列表渲染</text>
				<view v-for="item in arr">
					{{item}}
				</view>

				<view v-for="(value,name,index) in object">
					{{index}}.{{name}}.{{value}}
				</view>
			</view>

		</view>


	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				data: "123",
				statu: "2",
				arr: [{
						id: "1",
						name: "张三"
					},
					{
						id: "2",
						name: "王五"
					}
				],
				object: {
					game: "王者荣耀",
					author: "腾讯游戏公司"
				}
			}
		},
		methods: {
			onSurprise() {
				uni.showToast({
					icon: "none",
					title: "惊喜",
					mask: true
				})
			}
		}
	}
</script>

<style>
	.grammar-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 20rpx;
	}

	.grammar-model-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.grammar-model {
		width: 95%;
	}
</style>